<template>
    <div class="me  animated bounceInDown">
        <div class="me-statistics">
            <div class="visits">
                <label>访问量</label>
                <p>15641</p>
            </div>
            <div class="several-articles">
                <label>文章</label>
                <p>{{articleNum}}</p>
            </div>
        </div>
        <div class="panel panel-info">
            <div class="panel-heading">
                <span>关于博主</span>
                <img src="../../assets/img/logo.png" alt="" width="30" style="float: right">
            </div>
            <div class="panel-body">
                <p>{{intro}}{{intro}}{{intro}}{{intro}}</p>
                <img src="https://dss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3944603927,2898279314&fm=26&gp=0.jpg"
                     alt="">
                <p>{{intro}}{{intro}}{{intro}}{{intro}}</p>
            </div>
        </div>
    </div>
</template>

<script>
    import {mapState} from 'vuex'

    export default {
        name: "me",
        data() {
            return {
                intro: "这几天心里颇不宁静。今晚在院子里坐着乘凉，忽然想起日日走过的荷塘，在这满月的光里，总该另有一番样子吧。月亮渐渐地升高了，墙外马路上孩子们的欢笑，已经听不见了;妻在屋里拍着闰儿，迷迷糊糊地哼着眠歌。我悄悄地披了大衫，带上门出去。　　沿着荷塘，是一条曲折的小煤屑路。这是一条幽僻的路;白天也少人走，夜晚更加寂寞。荷塘四面，长着许多树，蓊蓊(wěng)郁郁的。路的一旁，是些杨柳，和一些不知道名字的树。没有月光的晚上，这路上阴森森的，有些怕人。今晚却很好，虽然月光也还是淡淡的。"
            }
        },
        computed: {
            ...mapState({
                articleNum: state => state.article.articleNum
            })
        },
        components: {},
        methods: {}
    }
</script>

<style lang="less" scoped>
    .me {
        & > .app-top {
            background: url("../../assets/img/appTop3.png");
            background-size: 100% 100%;
        }
    }

    .me-statistics {
        width: 50%;
        display: flex;
        margin: 20px auto;
        justify-content: space-around;

        & > div {
            width: 100%;
            text-align: center;
            box-sizing: border-box;

            &:first-child {
                border-right: 1px solid black;
            }
        }
    }

    .me-table {
        th {
            width: 50%;
        }

        td {
            text-align: left;
            background: salmon !important;
        }
    }

    .me-title {
        margin-right: 20px;
    }

    .for-myBlog {
        color: #5e5e5e;
        text-align: center;
        font-size: 20px;
    }

</style>
